<template>
  <view class="module-wrapper">
    <view class="tab-content">
      <view v-for="item in statusArr" :key="item.value" :class="queryParams.status ==item.value?'tab-def tab-chk':'tab-def'" @click="changeTab(item.value)">{{item.label}}</view>
    </view>
    <view class="wrapper-scroll">
      <scroll-view
        class="scroll-Y"
        scroll-y="true"
        refresher-background="#eee"
        refresher-enabled="true"
        :refresher-triggered="triggered"
        :scroll-top="scrollTop"
        @scrolltolower="loadMoreData"
        @refresherrefresh="refreshData"
        @scroll="onScroll"
      >
        <view class="list" v-if="dataList.length">
          <view class="list-item" v-for="item in dataList" :key="item.id">
            <image v-if="item.status==2" class="sh-icon" src="/static/images/safely/list-zg.png" mode=""></image>
            <view class="top">
              <view class="left">
                <image class="icon" src="/static/images/prereport/title-pre.png" mode=""></image>
                <text class="title">{{item.contractorName}}</text>
              </view>
              <view class="more" @click="openEdit(item)">更多 > ></view>
            </view>
            <view class="content">
              <view class="box">
                <image class="tip" src="/static/images/prereport/list-tip.png" mode=""></image>
                <text class="lab">风险等级：</text>
                <text class="val-tag tag-org">{{item.riskLevelName}}</text>
              </view>
              <view class="box">
                <image class="tip" src="/static/images/prereport/list-tip.png" mode=""></image>
                <text class="lab">检查人：</text>
                <text class="val">{{item.inspectorName}}</text>
              </view>
              <view class="box">
                <image class="tip" src="/static/images/prereport/list-tip.png" mode=""></image>
                <text class="lab">检查时间：</text>
                <text class="val">{{item.inspectionTime}}</text>
              </view>
            </view>
          </view>
        </view>
        
        <view v-else class="empty-content">
          暂无数据
        </view>
      </scroll-view>
    </view>
    <view class="fixed-btn-box">
      <uni-datetime-picker type="data" :resetBtn="true" v-model="queryParams.inspectionTime" @change="dateOnChange" @cancel="dateCancel">
        <view class="filter-box">
          <image class="filter-icon" src="/static/images/fillout/filter-icon.png" mode=""></image>
          <text class="filter-lab">筛选</text>
        </view>
      </uni-datetime-picker>

      <view class="btn-box">
        <view class="cust-btn" @click="openEdit()">新增填报</view>
      </view>
    </view>
  </view>
</template>

<script>
import { listInspectionRecords } from '@/api/person/inspectionRecords.js';
export default {
  data() {
    return {
      scrollTop: 0,
      triggered: false,
      hasMore: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        inspectionTime: null,
        status: -1,
      },
      dataList: [],
      total: 0,
      statusArr: [
        { label: '全部', value: -1 },
        { label: '待整改', value: '0,1' },
        { label: '已整改', value: 2 },
      ]
    };
  },
  onShow() {
    this.queryParams.pageNum = 1;
    this.scrollTop = 0;
    this.hasMore = true;
    this.dataList = [];
    this.$nextTick(() => {
      this.getDataList();
    });
  },
  methods: {
    getDataList() {
      let params = {...this.queryParams}
      if(params.status==-1) delete params.status
      listInspectionRecords(params)
        .then((res) => {
          if (res.code == 200) {
            this.dataList.push(...res.rows);
            this.total = res.total;
            this.hasMore = this.dataList.length < this.total;
          }
          this.triggered = false;
        })
        .catch((err) => {
          this.triggered = false;
        });
    },
    refreshData() {
      if (this.triggered) {
        return;
      }
      
      this.scrollTop = 0;
      this.triggered = true;
      this.queryParams.pageNum = 1;
      this.hasMore = true;
      this.dataList = [];
      this.getDataList();
    },
    loadMoreData() {
      if (this.triggered || !this.hasMore) {
        return;
      }
      this.queryParams.pageNum++;
      this.getDataList();
    },
    dateOnChange(e) {
      // this.queryParams.pageNum = 1;
      this.refreshData();
    },
    dateCancel(e) {
      this.queryParams.inspectionTime = null;
      this.refreshData();
    },
    changeTab(val){
      this.queryParams.status = val
      this.refreshData()
    },
    openEdit(item) {
      let params=''
      if(item){
        if(item.status == 0){
          params=`?id=${item.id}&type=1`
        }else if(item.status == 1 || item.status == 2){
          params=`?id=${item.id}&type=3`
        }
        // else if(this.$auth.hasPermi("person:inspectionRecords:zhenggai")){
        //   params=`?id=${item.id}&type=2`
        // }
        else {
          params=`?id=${item.id}&type=3`
        }
      }
      this.$tab.navigateTo(`/pages/inspection/edit${params}`);
    },
    onScroll(e) {
      this.scrollTop = e.detail.scrollTop
    }
  }
};
</script>

<style lang="scss" scoped>
.module-wrapper {
  height: 100%;

  .tab-content {
    display: flex;
    justify-content: space-between;
    padding: 16rpx 20rpx 27rpx;

    .tab-def {
      width: 220rpx;
      height: 65rpx;
      background: #ffffff;
      border-radius: 141rpx 141rpx 141rpx 141rpx;
      border: 1rpx solid #2e7dff;
      font-size: 32rpx;
      color: #2e7dff;
      text-align: center;
      line-height: 64rpx;
    }

    .tab-chk {
      background: #2e7dff;
      color: #fff;
    }
  }

  .wrapper-scroll {
    height: calc(100% - 230rpx);
    padding: 0 16rpx;
  }
  .scroll-Y {
    height: 100%;
    overflow-y: auto;
  }
  .list {
    display: flex;
    flex-direction: column;
    
    &-item {
      height: 285rpx;
      background: url('/static/images/safely/list-card.png') no-repeat;
      background-size: 100%;
      margin-bottom: 34rpx;
      position: relative;

      .sh-icon {
        width: 166rpx;
        height: 166rpx;
        position: absolute;
        right: 26rpx;
        bottom: 0;
      }

      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12rpx 8rpx;
        .left {
          padding-left: 10rpx;
          .icon {
            width: 32rpx;
            height: 21rpx;
          }
          .title {
            padding-left: 9rpx;
            font-weight: bold;
            font-size: 36rpx;
            color: #ffffff;
          }
        }
        .more {
          font-weight: 500;
          font-size: 20rpx;
          color: rgba(255, 255, 255, 0.5);
        }
      }
      .content {
        padding: 0 50rpx;
      }
      .box {
        display: flex;
        align-items: center;
        padding-top: 20rpx;
        .tip {
          width: 25rpx;
          height: 15rpx;
        }
        .lab {
          font-size: 24rpx;
          color: rgba(16, 44, 89, 0.5);
          padding-left: 5rpx;
        }
        .val {
          font-size: 24rpx;
          color: rgba(16, 44, 89, 1);
        }
      }
    }
  }
}

.fixed-btn-box {
  justify-content: space-between;

  .filter-box {
    display: flex;
    flex-direction: column;
    padding-left: 30rpx;
    .filter-icon {
      width: 40rpx;
      height: 40rpx;
    }
    .filter-lab {
      font-size: 24rpx;
      color: #102c59;
    }
  }
  .btn-box {
    width: 560rpx;
    height: 70rpx;
  }
}

.val-tag {
  font-size: 24rpx;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  padding: 0 20rpx;
}
.tag-org {
  color: rgba(251, 180, 56, 1);
  background: linear-gradient(42deg, rgba(255, 100, 58, 0.1) 0%, rgba(251, 180, 56, 0.1) 100%);
}
</style>
